/* @flow */

import React, { Component } from 'react';
import {
  View,
  Text,
  StyleSheet,
  SectionList,
  Image,
  Dimensions,
  Button,
  Modal,
  TouchableOpacity,
  Clipboard,
} from 'react-native';
var Platform = require('Platform');
const width = Dimensions.get('window').width;
const height = Dimensions.get('window').height;

export default class ICSInfoList extends Component {

  static navigationOptions = {
    headerTitleStyle:(Platform.OS === 'android')?{alignSelf: 'center'}:{},
 }
  constructor(props){
    super(props);
    this.state={
      icsData:[],
      modalVisible:false,
      modalDic:{},
      isICSType:false,
      jsonStr:'',
    }

  }

  setModalVisible(visible)
  {
    this.setState({
      modalVisible:visible ,
    });
  }
  componentWillMount(){

    this.getAlarmInfos()

    }

  getAlarmInfos = ()=>{
    var icsData = require('./ICSError.json');

    var array = [];

      array [0] = icsData;

      // console.log(array);

      let alarmData = [];
    for (var i = 0; i < array.length; i++) {
      array[i];

      let section = {}

      section.key = i;
      section.data = array[i].alrmList;

      for (var j = 0; j < section.data.length; j++) {

        section.data[j].key = j;

      }
        alarmData[i] = section;

    }
    this.setState({
      icsData:alarmData,
    });
  }

_icsItemSeparatorComponent = ()=>{
  return(
    <View style = {{width:width,backgroundColor:'transparent',height:15,}}></View>
  );
}

_itemServerLog = (item)=>{
  console.log('server=='+item.serverlog);
  this.setState({
    modalVisible:true ,
    modalDic:item.serverlog,
  });
}


_jsonString = (item)=>{

var array = [];
  for (var key in item) {
    key +':'+item[key];
    array.push('\n'+'"'+key+'"'+':'+'"'+item[key]+'"');
  }

console.log(key +':'+item[key]);
  this.setState({
    modalVisible:true ,
    modalDic:'{'+array.toString()+'\n'+'}',
    isICSType:true,
  });
}

_itemICSLog = (item)=>{
  console.log(JSON.stringify(item.info));

  this._jsonString(item.info)


}


  _icsRenderItem = (item)=>{
    console.log(item.date);

    let textStr = '错误描述:轻松一刻  必要项目暂无';

    let dateDetailStr = '检查时间:';
    return(
      <View style={styles.cellStyle}>
            <View style = {styles.topContentStyle}>
              <Text style = {styles.contentTextStyle}>{textStr}</Text>
              <Text style = {styles.contentTextStyle}>{dateDetailStr+item.item.date}</Text>

            </View>

            <View style ={styles.bottomContentStyle}>
              <View style = {styles.textForView}>
                <TouchableOpacity
                  onPress={() => {
                  // this.setModalVisible(true)
                  this._itemServerLog(item.item)
                }}
                  >
                  <Text style = {styles.textPressStyle}>serverLog</Text>
                </TouchableOpacity>
              </View>
              <View style = {styles.textForView}>
                <TouchableOpacity
                  onPress={() => {
                  // this.setModalVisible(true)
                  this._itemICSLog(item.item)
                }}
                  >
                  <Text style = {styles.textPressStyle}>ICSInfo</Text>

                </TouchableOpacity>
              </View>

            </View>
      </View>
    );
  }

  _icsOnshow = ()=>{

  }


_copyEnter = ()=>{


  var copyContent = this.state.modalDic;

  Clipboard.setString(copyContent);

  this.setState({
    modalVisible:false ,
  });

  this._setClipboardContent();
}

async _setClipboardContent(){
try {
  var content = await Clipboard.getString();
  console.log(content);
} catch (e) {
  this.setState({content:e.message});
}
}


cancelPress = ()=>{
  this.setState({
    modalVisible:false ,
  });
}

  _icsModalView = ()=>{
    return(
        <View style={styles.modalBaseViewStyle}>
          <View style = {styles.modalTopBaseViewStyle}>
            <TouchableOpacity
            activeOpacity = {0.5}
             onPress = { ()=>{
              this.cancelPress()}}
              >
              <Image source ={require('../../img/srcImage/img_cancel_back.png')} style={styles.cancelImageStyle}/>
            </TouchableOpacity>
          </View>
          <View style={styles.modalInfoBaseViewStyle}>
            <View style = {styles.centerBottomStyle}>
              <View style = {styles.copyContentStyle}>

                <Text style={styles.contentModalTextStyle}>{this.state.modalDic}</Text>

              </View>

              <View style = {styles.copyPressStyle}>
                <TouchableOpacity
                  activeOpacity = {0.5}
                  onPress={() => {
                  // this.setModalVisible(true)
                  this._copyEnter()
                }}
                  >
                  <Text style ={styles.textPressStyle}>复制到粘贴板</Text>
                </TouchableOpacity>
              </View>
            </View>


          </View>
        </View>

    );
  }


  render() {
    return (
      <View style={styles.container}>
        <Modal
          animationType={"fade"}
          transparent={true}
          visible={this.state.modalVisible}
          onShow = {this._icsOnshow}
          onRequestClose={() => {

          }}
        >
            {this._icsModalView()}
          </Modal>

          <View style={styles.sectionBackViewStyle}>
            <SectionList
              // ListEmptyComponent = {this._icsListEmptyComponent}
              // ListFooterComponent = {this._icsListFooterComponent}
              // ListHeaderComponent = {this._icsListHeaderComponent}
              ItemSeparatorComponent = {this._icsItemSeparatorComponent}
              sections = {this.state.icsData}
              renderItem = {this._icsRenderItem}
              // renderSectionHeader = {this._icsRenderSectionHeader}
              initialNumToRender = {6}
            />
          </View>

      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor:'rgb(255, 255, 255)'
  },
  sectionBackViewStyle:{
    marginTop:10,
    backgroundColor:'rgb(255, 255, 255)',
  },
  header_title:{
   backgroundColor: 'white',
   color: '#BD10E0',
   height: 55,
   textAlign: 'center',
   fontSize: 16,
   paddingTop: 18,
   alignSelf: 'center', // width of both buttons + no left-right padding
  },
  cellStyle:{
    flexDirection:'column',
    justifyContent:'center',
    width:width-10,
    height:115,
    borderColor:'#BD10E0',
    borderWidth:1,
    borderRadius:8,
    marginLeft:5,
    marginRight:5,
  },
  topContentStyle:{
    flexDirection:'column',
    justifyContent:'flex-start',
    marginTop:15,
    marginLeft:10,
    marginRight:10,
  },

  bottomContentStyle:{
    flexDirection:'row',
    justifyContent:'space-between',
    alignItems:'center',
    backgroundColor:'transparent',
    marginBottom:15,
    marginLeft:30,
    marginRight:30,
    width:width-10-60,

  },
  textForView:{
    width:(width-10-60-50)/2,
    height:30,
    backgroundColor:'transparent',
    borderColor:'#BD10E0',
    borderWidth:1,
    borderRadius:4,
    flexDirection:'column',
    justifyContent:'center',
    alignItems:'center',
  },
  contentTextStyle:{
    width:width-30,
    height:35,
    fontSize:14,
    color:'black',

  },
  contentModalTextStyle:{
    fontSize:14,
    color:'black',
  },
  textPressStyle:{
    color:'#BD10E0',
    fontSize:14,
  },
  //Modal相关

  modalBaseViewStyle:{
     backgroundColor:'rgba(0, 0, 0, 0.5)',
     flexDirection:'column',
     justifyContent:'flex-start',
     alignItems:'center',
     width:width,
     height:height,
    //  marginTop:64,

  },
  modalTopBaseViewStyle:{
    width:width,
    backgroundColor:'transparent',
    flexDirection:'row',
    justifyContent:'flex-end',
    alignItems:'flex-start',

  },
  centerBottomStyle:{
    flexDirection:'column',
    justifyContent:'center',
    alignItems:'center',
    backgroundColor:'white',
    marginLeft:20,
    marginRight:20,
    marginBottom:40,
    borderRadius:8,
  },
  cancelImageStyle:{
    marginTop:25,
    marginRight:20,
    width:20,
    height:20,
  },
  modalInfoBaseViewStyle:{
    flexDirection:'column',
    justifyContent:'center',
    alignItems:'center',
    height:height-64,
    backgroundColor:'transparent',

  },

  copyContentStyle:{
    marginTop:30,
    marginLeft:10,
    marginRight:10,
    backgroundColor:'transparent',

  },

  copyPressStyle:{
    marginTop:20,
    width:141,
    height:33,
    backgroundColor:'transparent',
    borderColor:'#BD10E0',
    borderWidth:1,
    borderRadius:4,
    marginBottom:20,
    flexDirection:'column',
    justifyContent:'center',
    alignItems:'center',
  },


});
